<template>
    <div class="ocrForm">
        <!-- 顶部 -->
        <FormTopDesc desc="ফর্ম"></FormTopDesc>
        <!-- form表单 -->
        <div class="form">
            <van-form>
                <van-field readonly clickable name="datetimePicker" :value="value" label="birthday"
                    placeholder="সময় নির্বাচন করতে ক্লিককরুন" @click="showPicker = true" v-model="birthday" />
                <van-popup v-model="showPicker" position="bottom">
                    <van-datetime-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" type="date"
                        confirm-button-text="নিশ্চিত করুন" cancel-button-text="বাতিল" title="বছরের মাসের দিন নির্বাচন করুন"
                        @confirm="doConfirm" />
                </van-popup>

                <van-field v-model="form.idCard" name="idCard" label="idCard" placeholder="idCard"
                    :rules="[{ required: true, message: 'অনুগ্রহ করে আইডিকার্ড পূরণ করুন' }]" />
                <van-field v-model="form.realName" name="realName" label="realName" placeholder="realName"
                    :rules="[{ required: true, message: 'আপনার নাম পূরণ করুন' }]" />
                <div class="btn" @click="onSubmit">জমা</div>
            </van-form>
        </div>
    </div>
</template>

<script>
import isNext from './isNext.js'
import { getUserInfoApi, uploadFormApi } from "../../api";
import { jiami, jiemi } from "../../utils/AESKey.js";
export default {
    data() {
        return {
            value: '',
            showPicker: false,
            minDate: new Date(1900, 0, 1),
            maxDate: new Date(Date.now()),
            //当前选中的时间
            currentDate: new Date('2000-01-01'),
            birthday: '',
            f: {
                model: {
                    birthDay: '',
                    idCard: this.$store.state.ocrForm.idCard,
                    realName: this.$store.state.ocrForm.realName,
                    idCardImageFront: this.$store.state.ocrUrl.sfqian,
                    idCardImageBack: this.$store.state.ocrUrl.sfhou
                }
            }
        }
    },
    methods: {
        doConfirm(value) {
            this.showPicker = false
            const timer = new Date(value).getTime()
            this.birthday = this.formatDate(timer)
            //将时间戳赋值给表单的数据
            this.f.model.birthDay = timer
            console.log(timer, '时间戳')
            console.log(value, 'value')
            console.log(this.birthday, 'this.birthday')
        },
        //表单提交按钮
        async onSubmit() {
            const form = {
                model: {
                    formId: '',
                    submitData: ''
                }
            }
            console.log(this.f, '提交用户信息的表单')
            const res = await getUserInfoApi(jiami(this.f))
            console.log(jiemi(res.data), '提交用户信息结果')
            isNext()
        },
        //时间戳转成年月日
        formatDate(timestamp) {
            const date = new Date(timestamp);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    },
    computed: {
        form() {
            return this.$store.state.ocrForm
        },
    },
    created() {
        // const timerstamp = this.$store.state.ocrForm.birthDay
        // this.f.model.birthday = formatDate(timestamp) {
        //     const date = new Date(timestamp);
        //     const year = date.getFullYear();
        //     const month = String(date.getMonth() + 1).padStart(2, '0');
        //     const day = String(date.getDate()).padStart(2, '0');
        //     return `${year}-${month}-${day}`;
        // },
    }
}
</script>
<style lang="less" scoped>
.ocrForm {
    padding-top: (100/@a);

    .form {
        .btn {
            background-color: #6b82d8;
            border-radius: (10/@a);
            margin-top: (30/@a);
            margin-left: (75/@a);
            width: (230/@a);
            height: (44/@a);
            text-align: center;
            line-height: (44/@a);
            font-size: (20/@a);
        }
    }
}
</style>